<!-- 轮播图组件
 @	 swiperUrl [String] 获取图片地址
 @	 detailsUrl [String] 跳转对应详情页地址
 -->
<template>
	<view>
		<view class="swiper">
			<swiper :indicator-dots="true" :duration="1000">
				<swiper-item v-for="item in swiperRows" @click="goDeatils(item)" :data-id="item.id">
					<view class="swiper-item">
						<image :src="getImg(item.advImg)" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getImg,http
	} from "../../utils/request.js"
	export default {
		name: "Swipers",
		props: ["swiperUrl", "detailsUrl"],
		data() {
			return {
				swiperRows : [],
				getImg: getImg
			}
		},
		created() {
			// 获取轮播图资源
			const that = this
			http({
				url: this.swiperUrl
			}).then((res) => {
				that.swiperRows = res.data.rows
			}).catch((err) => console.log(err))
		},
		methods: {
			// 跳转到对应的详情页 传入图片的id
			goDeatils(e) {
					uni.navigateTo({
						url: this.detailsUrl + e.targetId
					})
			}
		}
	}
</script>

<style scoped>
	.swiper-item>image {
		width: 100%;
	}
</style>
